<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiberTool - 个人工具箱</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/light-theme.css">
    <link rel="stylesheet" href="/static/css/dark-theme.css">
    <link rel="stylesheet" href="/static/css/favorites.css">
    <link rel="stylesheet" href="/static/css/language-switcher.css">
    <link rel="icon" href="/static/favicon.ico">
    <!-- 引入 Bootstrap -->
    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Feather 图标 -->
    <script src="/node_modules/feather-icons/dist/feather.min.js"></script>
    <!-- 引入主题切换脚本 -->
    <script src="/static/js/theme.js"></script>
    <script src="/static/js/dify-theme.js"></script>
    <!-- 引入语言切换脚本 -->
    <script src="/static/js/language.js"></script>
    
    <!-- Dify 聊天机器人动态配置 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            fetch('/api/get_sensitive_info')
                .then(response => response.json())
                .then(config => {
                    const configScript = document.createElement('script');
                    configScript.textContent = `window.difyChatbotConfig = ${JSON.stringify({
                        token: config.api_token,
                        baseUrl: config.api_url
                    })}`;
                    
                    const difyScript = document.createElement('script');
                    difyScript.src = `${config.api_url}/embed.min.js?v=${Date.now()}`;
                    difyScript.id = config.api_token;
                    difyScript.async = false;
                    
                    // 先添加配置脚本再加载Dify脚本
                    document.head.appendChild(configScript);
                    document.head.appendChild(difyScript);
                    
                    // 监听Dify脚本加载完成
                    difyScript.onload = () => {
                        if(window.difyChatbot) {
                            window.difyChatbot.init({
                                ...window.difyChatbotConfig,
                                theme: document.documentElement.getAttribute('data-theme')
                            });
                        }
                    };
                })
                .catch(error => console.error('加载配置失败:', error));
        });
    </script>
    <!-- Add this meta tag in head section to prevent source map requests -->
    <meta name="devtools-dynamic-meta" content="no-cache">
</head>
<body>
    <header class="bg-primary text-white p-3">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <h1><a href="/" class="text-white text-decoration-none">LiberTool</a></h1>
                <div class="d-flex align-items-center">
                    <span class="me-3">{{ app_description }}</span>
                    <!-- 语言切换下拉菜单 -->
                    <div class="dropdown me-3">
                        <button class="btn btn-sm btn-outline-light dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <i data-feather="globe" class="me-1"></i>
                            {% for lang in supported_languages %}
                                {% if lang.code == current_language %}
                                    {{ lang.name }}
                                {% endif %}
                            {% endfor %}
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
                            {% for lang in supported_languages %}
                                <li><a class="dropdown-item {% if lang.code == current_language %}active{% endif %}" href="/set-language/{{ lang.code }}">{{ lang.name }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                    <!-- 主题切换开关 -->
                    <div class="d-flex align-items-center">
                        <i data-feather="sun" class="text-white"></i>
                        <label class="theme-switch mx-2">
                            <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
                            <span class="slider"></span>
                        </label>
                        <i data-feather="moon" class="text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main class="container my-4">
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title h4">{{ welcome_title }}</h2>
                        <p class="card-text">{{ welcome_text }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-12">
                <div class="search-container mb-3">
                    <input type="text" id="tool-search" placeholder="{{ search_placeholder }}" class="form-control">
                    <i data-feather="search" class="search-icon"></i>
                </div>
                <div class="d-flex flex-wrap">
                    {% for category in categories %}
                    <button class="btn btn-sm category-badge {% if category.id == 'all' %}active{% endif %}" data-category="{{ category.id }}">
                        {{ category.name }}
                    </button>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="row" id="tools-container">
            {% for tool in tools %}
            <div class="col-md-4 col-sm-6 tool-item" data-categories="{{ tool.categories|join(' ') }}">
                <div class="card tool-card">
                  <div class="card-body position-relative">
                    <button class="btn btn-icon position-absolute top-0 end-0 favorite-btn" 
                            data-tool-id="{{ tool.id }}"
                            onclick="toggleFavorite(event, '{{ tool.id }}')">
                    <!-- 空心星星（未收藏状态） -->
                    <svg class="star-empty" width="24" height="24" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M231.866858 924.559197l99.623975-315.315432L76.893274 391.534348l320.43094 0L512.050142 98.1586l128.641869 293.375747 306.414715 0L706.971553 609.097432 809.674657 925.850609 513.64343 727.408001 231.866858 924.559197zM513.134847 687.826518l238.918461 159.045319L670.826332 599.742367l196.015326-176.485527L620.09388 423.25684 513.711991 180.666756l-94.866624 242.590084L160.683632 423.25684 367.667777 599.134523 289.456485 848.212368 513.134847 687.826518z" fill="#f4ea2a"></path>
                    </svg>
                    <!-- 实心星星（收藏状态） -->
                    <svg class="star-filled hidden" width="24" height="24" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M231.866858 924.559197l99.623975-315.315432L76.893274 391.534348l320.43094 0L512.050142 98.1586l128.641869 293.375747 306.414715 0L706.971553 609.097432 809.674657 925.850609 513.64343 727.408001 231.866858 924.559197z" fill="#f4ea2a"></path>
                    </svg>
                </button>
                    <div class="d-flex align-items-center mb-2">
                      <i data-feather="{{ tool.icon }}" class="me-2"></i>
                      <h5 class="card-title mb-0">{{ tool.name }}</h5>
                    </div>
                    <p class="card-text">{{ tool.description }}</p>
                        <a href="{{ tool.route }}" class="btn btn-primary btn-sm">{% if 'documentation' in tool.categories and tool.id != 'document-search' and tool.id != 'bookmarks' %}{{ view_doc }}{% else %}{{ use_tool }}{% endif %}</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </main>

    <footer class="bg-light py-3 mt-5">
        <div class="container text-center">
            <p class="mb-0">{{ copyright }}</p>
        </div>
    </footer>
    
    <!-- Dify聊天机器人样式 -->
    <style> 
        /* 错误提示样式 */
        .dify-error-alert {
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: white;
        }
        
        .error-details h6 {
            margin-bottom: 4px;
            font-weight: 600;
        }
        
        .btn-retry {
            margin-top: 8px;
            padding: 6px 12px;
            background: rgba(255,255,255,0.15);
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        
        .btn-retry:hover {
            background: rgba(255,255,255,0.25);
        }
        
        .loading-spinner {
            padding: 12px;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        /* 基础样式 */
        #dify-chatbot-bubble-button { 
            background-color: var(--dify-chatbot-bubble-button-bg-color, #1C64F2) !important; 
        } 
        #dify-chatbot-bubble-window { 
            width: 24rem !important; 
            height: 40rem !important; 
        }
        
        /* 根据主题动态调整样式 */
        html[data-theme="light"] #dify-chatbot-bubble-button {
            --dify-chatbot-bubble-button-bg-color: #1C64F2;
        }
        
        html[data-theme="dark"] #dify-chatbot-bubble-button {
            --dify-chatbot-bubble-button-bg-color: #3B82F6;
        }
    </style>

        <!-- 引入Bootstrap的JavaScript依赖 -->
    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/init.js"></script>
    <script src="/static/js/tool-list.js"></script>
    <script src="/static/js/favorites.js"></script>
</body>
</html>